﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <div class="edit_pagecontainer">
            <div class="edit_formcontainer">
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="组织架构授权" name="org">
                        <span>授权部门</span>
                        <common-tree :tree-data="ouTreeData" tree-Model="multi" :tree-select-array="ouList"
                            v-on:node-select-change="ouNodeChange" :tree-body-width="650" :tree-body-height="220"
                            :only-leaf="true">
                        </common-tree>
                        <span>授权人员</span>
                        <common-tree :tree-data="userTreeData" tree-Model="multi" :tree-select-array="userList"
                            v-on:node-select-change="userNodeChange" :tree-body-width="650" :tree-body-height="220"
                            :only-leaf="true">
                        </common-tree>
                    </el-collapse-item>
                    <el-collapse-item title="角色设置授权" name="role">
                        <el-checkbox v-for="role in roleList" v-model="role.IsCheck" :key="role.RowGuid">
                            {{role.RoleName}}
                        </el-checkbox>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <div class="edit_opcontainer">
            <el-button type="primary" v-on:click="handleSubmit">保 存</el-button>
            <el-button v-on:click="close">取 消</el-button>
        </div>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
@Scripts.Render("~/Resource/component/tree/index.js")
<script>
    var ouTreeUrl = GetRootPath() + "Frame/OU/Tree"
    var userTreeUrl = GetRootPath() + "Frame/User/Tree"
    var detailUrl = GetRootPath() + "Frame/ModuleRight/FindModuleRightDetail";
    var updateUrl = GetRootPath() + "Frame/ModuleRight/OperateModuleRightUpdate";
    var pageData = {
        //data
        form: {

        },
        activeNames: ["role", "org"],
        roleList: [],
        ouList: [],
        userList: [],
        ouTreeData: [],
        userTreeData: [],
        //css
        labelWidth: '100px'
    };

    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            bindOUTree();
            bindUserTree();
            this.bindDetail();
        },
        methods: {
            bindDetail: function () {
                var data = {
                    RowGuid: GetUrlParam("RowGuid"),
                }
                JsonAjaxPost(detailUrl, JSON.stringify(data), function (data,
                    status) {
                    if (data.code == 0) {
                        pageData.roleList = data.RoleList
                        pageData.ouList = data.OUList
                        pageData.userList = data.UserList
                    }
                })
            },
            handleSubmit: function () {
                var roleCheckList = [];
                pageData.roleList.forEach(element => {
                    if(element.IsCheck){
                        roleCheckList.push(element);
                    }
                });
                var data = {
                    RowGuid: GetUrlParam("RowGuid"),
                    RoleList: JSON.stringify(roleCheckList),
                    OUList: JSON.stringify(pageData.ouList),
                    UserList: JSON.stringify(pageData.userList)
                }
                JsonAjaxPost(updateUrl, JSON.stringify(data), function (data,
                    status) {
                    if (data.code == 0) {
                        OpenSuccess('提示', '保存成功！', function () {
                            CloseDialog();
                        })
                    } else {
                        OpenFail('提示', '保存失败！')
                    }
                })
            },
            close: function () {
                CloseDialog();
            },
            ouNodeChange: function (val) {
                pageData.ouList = val;
            },
            userNodeChange: function (val) {
                pageData.userList = val;
            },
        }
    })

    function bindOUTree() {
        var data = {

        }
        JsonAjaxPost(ouTreeUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "ouTreeData", data.tree);
        })
    }

    function bindUserTree() {
        var data = {

        }
        JsonAjaxPost(userTreeUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "userTreeData", data.tree);
        })
    }
</script>

</html>
